<template>
  <div class="nav-bar-container">
    <el-row :gutter="15">
      <!-- <el-col><vab-logo></vab-logo></el-col> -->
      <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
        <div class="left-panel">
          <vab-logo></vab-logo>
          <div class="collapse-box">
            <i
              :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
              :title="collapse ? '展开' : '收起'"
              class="fold-unfold"
              @click="handleCollapse"
            ></i>
          </div>
          <div class="menu-box">
            <template v-for="menu in navbarMenus">
              <span
                :key="menu.id"
                class="menu-item"
                @click="toShowResetSideMenus(menu)"
              >
                {{ menu.menu_name }}
              </span>
            </template>
          </div>
        </div>
      </el-col>
      <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
        <div class="right-panel">
          <vab-error-log />
          <vab-full-screen-bar @refresh="refreshRoute" />
          <vab-theme-bar class="hidden-xs-only" />
          <vab-icon
            title="重载所有路由"
            :pulse="pulse"
            :icon="['fas', 'redo']"
            @click="refreshRoute"
          ></vab-icon>
          <vab-avatar></vab-avatar>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapActions, mapGetters } from 'vuex'

  export default {
    name: 'VabNavBar',
    data() {
      return {
        pulse: false,
      }
    },
    computed: {
      ...mapGetters({
        collapse: 'settings/collapse',
        visitedRoutes: 'tabsBar/visitedRoutes',
        device: 'settings/device',
        routes: 'routes/routes',
        navbarMenus: 'routes/navbarMenus'
      }),
    },
    methods: {
      ...mapActions({
        changeCollapse: 'settings/changeCollapse',
        setSideMenus: 'routes/setSideBarMenus'
      }),
      handleCollapse() {
        this.changeCollapse()
      },
      async refreshRoute() {
        this.$baseEventBus.$emit('reload-router-view')
        this.pulse = true
        setTimeout(() => {
          this.pulse = false
        }, 1000)
      },

      // 重新设置左侧菜单
      toShowResetSideMenus(menuItem) {
        this.setSideMenus(menuItem).then((res) => {
          this.$router.push({ name: menuItem.component })  // 默认显示頁
        }) // 设置左侧菜单。
      },
    },
  }
</script>

<style lang="scss" scoped>
  .nav-bar-container {
    position: relative;
    height: $base-nav-bar-height;
    padding-right: $base-padding;
    padding-left: 0;
    overflow: hidden;
    user-select: none;
    background: $base-navbar-background;
    box-shadow: $base-box-shadow;
    z-index: 9; // 层级，使box-shadow生效
    color: $base-navbar-color;
    .left-panel {
      display: flex;
      align-items: center;
      justify-items: center;
      height: $base-nav-bar-height;
      .collapse-box {
        background-color: $base-logo-background;
        width: 32px;
        .fold-unfold {
          color: $base-color-white;
          cursor: pointer;
          line-height: $base-nav-bar-height;
        }
      }
      .menu-box {
        height: 100%;
        .menu-item {
          padding: 0 10px;
          display: inline-block;
          line-height: $base-nav-bar-height;
          cursor: pointer;
          &:hover {
            color: #fff;
            background-color: #268bd2;
          }
        }
      }

      ::v-deep {
        .breadcrumb-container {
          margin-left: 10px;
        }
      }
    }

    .right-panel {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: flex-end;
      height: $base-nav-bar-height;

      ::v-deep {
        svg {
          width: 1em;
          height: 1em;
          margin-right: 15px;
          cursor: pointer;
          font-size: $base-font-size-small;
          // color: $base-color-gray;
          // fill: $base-color-gray;
        }

        button {
          svg {
            margin-right: 0;
            color: $base-color-white;
            cursor: pointer;
            fill: $base-color-white;
          }
        }

        .el-badge {
          margin-right: 15px;
        }
      }
    }
  }
</style>
